<template>
<div class="editForm-wrapper">
  <el-dialog
    :title="!inputForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    append-to-body
     v-dialogDrag
    :visible.sync="visible">
    <el-form :model="inputForm" :rules="dataRule" v-loading="loading" ref="inputForm" @keyup.enter.native="doSubmit()"
             label-width="115px" @submit.native.prevent>
      <el-form-item label="标签:" prop="label">
        <el-input v-model="inputForm.label" placeholder="标签"></el-input>
      </el-form-item>
      <el-form-item label="键值:" prop="value">
        <el-input v-model="inputForm.value" placeholder="键值"></el-input>
      </el-form-item>
      <el-form-item label="排序号:" prop="sort">
        <el-input-number  :step="1" v-model="inputForm.sort" placeholder="排序号"></el-input-number>
      </el-form-item>
      <el-form-item label="描述:" prop="description">
        <el-input  v-model="inputForm.description" placeholder='请输入描述'></el-input>
      </el-form-item>
      <!--  状态(0;停用；1:启用；) -->
      <el-form-item label="是否为默认值:" prop="isDefault">
        <el-select clearable v-model="inputForm.isDefault" placeholder='请选择状态'>
          <el-option
            v-for="item in  $dictUtils.getDictList('isDefault')"
            :key="item.value"
            :label="item.label"
            :value="Number(item.value)">
          </el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">

                <el-button type="primary" @click="doSubmit()" v-noMoreClick>确定</el-button>
        <el-button @click="visible = false">取消</el-button>


    </span>
  </el-dialog>
</div>

</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        loading: false,
        inputForm: {
          dictValueId: '',
          dictType: {
            id: ''
          },
          label: '',
          value: '',
          description: '',
          isDefault: 1,
          sort: 1
        },
        dataRule: {
          label: [
            {required: true, message: '标签不能为空', trigger: 'change'}
          ],
          value: [
            {required: true, message: '键值不能为空', trigger: 'change'}
          ],
          state: [
            { required: true, message: '请选择状态', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
    	handleClose(done) {
			this.$Msg.confirm({
				title:'您确定要关闭吗？',
				content:this.GLOBAL.FORM_CLOSE_TIPS,
				confirmCall:()=>{
					done();
				}
			})
		},
      init (method, obj) {
        console.log(obj)
        this.inputForm.dictValueId = obj.dictValueId
        this.inputForm.dictType.id = obj.dictTypeId
        console.log(this.inputForm)

        this.visible = true
        this.$nextTick(() => {
          this.$refs['inputForm'].resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.$http({
              url: `/sys/dict/queryDictValue?dictValueId=${this.inputForm.dictValueId}`,
              method: 'get',
              loading: false
            }).then(({data}) => {
              if (data && data.success) {
                this.inputForm = this.recover(this.inputForm, data.dictValue)
                this.inputForm.dictValueId = obj.dictValueId
              }
            })
          }
        })
      },
      // 表单提交
      doSubmit () {
        if (!this.groupId) {
          this.groupWrong = '请选择分组'
        }
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/sys/dict/saveDictValue`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              this.loading = false
              if (data && data.success) {
                this.$message.success(data.msg)
                this.visible = false
                this.$emit('refreshDataList')
                this.$dictUtils.refreshDictList()
              }
            })
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
// ::v-deep .el-dialog > .el-dialog__body .el-form-item .el-input__inner {
//     height: 32px !important;
//     font-size: 14px !important;
//     width: 320px !important;
// }
 ::v-deep .el-dialog__header{
    padding: 0 20px !important;
    height: 41px;
    line-height: 41px;
  }

  ::v-deep .el-dialog__headerbtn{
    top: 11px;
  }
 ::v-deep .el-dialog__title{
    font-size: 16px;
    color: #333333;
  }
 ::v-deep .el-dialog__body{
    padding: 30px 50px 0 !important;
    .el-form{
      .el-form-item{
         margin-bottom: 20px !important;
         margin-right: 0;
        .el-form-item__label,.el-form-item__content{
          line-height: 32px;

        }
       .el-date-editor{
          .el-input__inner {
            padding-left: 30px !important;
        }
      }

        .el-form-item__label{
          padding-right: 10px;
        }
        .el-input {
          width: inherit;
          height: 32px;

          input {
            height: 32px;
            border: 1px solid #AAAAAA;
            border-radius: 4px;
            color: #333333;
          }
          .el-input__inner{
            min-width: 320px !important;
          }

          input:hover, input:focus {
            border-color: #1890ff;
          }

          .el-input__inner::-webkit-input-placeholder {
            color: #999999;
          }
        }
        .el-input.el-input-group{
          .el-input__inner{
            min-width: 285px !important;
            border-right: none;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
          .el-input-group__append{
            width: 40px;
            padding: 0;
            text-align: center;
            border: 1px solid #AAAAAA;
            position: relative;
            left: -4px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #1890FF;
            background: #FFFFFF;
          }

        }
        .el-input.el-input--suffix .el-input__icon{
          line-height: 32px;
        }
        .el-textarea{
          .el-textarea__inner{
            resize: none;
            height: 92px;
            border: 1px solid #AAAAAA;
            border-radius: 4px;
            padding: 5px 10px;
            font-family:Arial;
          }
        }
        .el-input-number{
          .el-input__inner{
            width: 120px;
            min-width: 120px !important;
          }
        }
      }

    }
 }
  ::v-deep .el-dialog__footer{
    padding-top: 10px !important;
    margin-top: -20px;
    .el-button{
      margin-right: 10px;
    }
    .el-button:last-child{
      margin-right: 0;
    }
  }

</style>
